

<template>
    <tm-app class="groupMembers" bgImg="f5">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->
        <view
            style="background: #fff"
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="title d-flex a-center j-between">{{ title }}</view>
            <view class="right_box">
                <!-- <image src="/static/center/dian.png" class="dian"></image> -->
            </view>
        </view>
        <view
            class="content"
            :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }"
        >
            <view class="box psr">
                <input
                    v-if="type === 'inp'"
                    class="inp"
                    v-model="inputText"
                    placeholder-style="color:#ccc"
                    :placeholder="placeholder"
                    :type="inpType"
                    :focus="true"
                    @input="checkLength()"
                />

                <textarea
                    v-if="type === 'textarea'"
                    class="tarea"
                    v-model="inputText"
                    placeholder-style="color:#ccc"
                    :placeholder="placeholder"
                    :type="inpType"
                    :focus="true"
                    @input="checkLength()"
                />

                <view class="btn_main_r" @tap="submit">
                    <text class="text">确认修改</text>
                </view>
            </view>

            <!-- <view class="d-flex a-center j-center" style="margin-top:50rpx;"><tm-button class="btn_main" :width="680" :shadow="-1" :linear-color="['#64F1C5','#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" @tap="SetGroupMemberCustomField" label="确认修改"></tm-button></view> -->
        </view>
    </tm-app>
</template>

<script setup lang="ts">
import { ref, reactive, computed, nextTick } from "vue";
import { onReady, onShow, onLoad, onUnload } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { checkSwear } from "@/utils/utils"
import { isPhone,desensitizeID } from "@/utils/format"

const goBack = () => {
    uni.navigateBack();
};

const inputText = ref("");
const inpType = ref("text");

const userData: any = userDataStore();

const systemInfo: any = systemInfoStore();

const checkLength = () => {
    const maxLength = textLength.value;

    let content = inputText.value.trim();
    let str = "";
    let len = 0;
    for (var i = 0; i < content.length; i++) {
        //正则表达式判断中文
        if (/[\u4e00-\u9fa5]/.test(content[i])) {
            len += 2;
        } else {
            len++;
        }

        if (len <= maxLength) {
            str += content[i];
        }
    }
    nextTick(() => {
        inputText.value = str;
    });
};

const title = ref("修改edit");
const textLength = ref(1000);

let notAllowEmpty = false;

let emitText = null;
let rule = null;
const type = ref("inp");

const placeholder = computed(() => {
    return `请输入，最多${textLength.value / 2}个字`;
});

const submit = () => {
    if (notAllowEmpty) {
        if (!inputText.value) {
            uni.showToast({
                icon: "none",
                title: "请输入",
                duration: 2000,
            });
            return;
        }
    }

    if(!checkSwear(inputText.value)){
        uni.showToast({
            icon: "none",
            title: "内容包含敏感词,请重新输入",
            duration: 1500,
        });
        return
    }

    if(rule==='phone'){
        if(!checkPhone()){
            return
        }
    }


    uni.$emit(emitText, inputText.value);
    goBack();
};


const checkPhone=()=>{
    if(!isPhone(inputText.value)){
        uni.showToast({
            icon: "none",
            title: '您输入的手机号有误，请检查',
            duration: 2000,
        });
        return false;
    }

    return true
}

onReady(() => {});

onLoad((option: any) => {
    title.value = option.title;
    emitText = option.emit;
    inputText.value = option.text;
    textLength.value = Number(option.len);
    textLength.value = Number(option.len);
    notAllowEmpty = option.notAllowEmpty;
    rule = option.rule
    if(option.type==='textarea'){
       type.value = 'textarea'
    }else if(option.type&&option.type!=='textarea'){
        inpType.value = option.type
    }

    
});

onUnload(() => {});

onShow(() => {});
</script>

<style lang="scss" scoped>
.groupMembers {
    .btn_main_r {
        position: absolute;
        bottom: 20rpx;
        left: 10rpx;
    }

    .content {
        position: absolute;
        width: 750rpx;
        left: 0;
        right: 0;
        padding-top: 20rpx;
        bottom: constant(safe-area-inset-bottom);
        bottom: env(safe-area-inset-bottom);
        .box {
            width: 710rpx;
            margin: 0 auto;
            background: #fff;
            height: 500rpx;
            padding: 20rpx;
            border-radius: 20rpx;
            .inp {
                background: #f5f5f5;
                width: 100%;
                height: 90rpx;
                padding: 0 20rpx;
                border-radius: 20rpx;
            }
            .tarea {
                background: #f5f5f5;
                width: 100%;
                height: 350rpx;
                padding: 20rpx;
                border-radius: 20rpx;
            }
        }
    }
}
</style>
